import React, { Component } from 'react';
import { NavBar, Icon } from 'antd-mobile';
import axios from 'axios'

class Com extends Component {
  state={
    topics: {},
    answerlist: []
  }
  componentDidMount(){
    axios.get(`http://rap2.taobao.org:38080/app/mock/244731/api/topics?topicid=${sessionStorage.getItem('topicid')}`).then(
      res=>{
        this.setState({
          topics: res.data.data,
          answerlist: res.data.data.answerlist
        })
      }
    )
  }
  render() {
    return (
      <div className='box'>
        {/* 头部 */}
        <header className='header' style={{marginBottom: '0.1rem'}}>
          <NavBar
            mode="light"
            // icon={<Icon type={require('./../../left.svg')} />}
            icon={ <span className="iconfont icon-fanhui" style={{ fontSize: '0.23rem', color: '#00B145' }}></span>}
            onLeftClick={() => {
              this.props.history.go(-1)
            }}
            rightContent={[
              <Icon key="0" type="search" color='#00B145' style={{ marginRight: '0.13rem' }} />
            ]}
            >今日话题
          </NavBar>
        </header>
        <div className='content'>
          {/* 今日话题和作者区域 */}
          <div style={{
            borderBottom: '1px solid #ccc'
          }}>
            <p style={{
              margin: '0 0.3rem',
              fontSize:'0.2rem',
              fontWeight:600,
              color:'rgba(51,51,51,1)',
              lineHeight:'0.27rem',
              textAlign: 'center',
              marginBottom: '0.2rem',
            }}>今日话题 | { this.state.topics.title}</p>
            <div style={{
              marginLeft: '0.15rem',
              display: 'flex',
              alignItems: 'center',
              marginBottom: '0.25rem'
            }}>
              <img src={this.state.topics.avatar} style={{
                marginRight: '0.1rem',
                width: '0.425rem',
                height: '0.425rem'
              }} alt=""/>
              <div>
                <p style={{
                  fontSize:'0.14rem',
                  fontWeight: 600,
                  color:'rgba(51,51,51,1)'
                }}>{this.state.topics.username}</p>
                <p style={{ color: '#666666'}}>{this.state.topics.answers}回复 | {this.state.topics.loves}关注 | {this.state.topics.watchs}浏览</p>
                <p style={{ color: '#666666'}}>发布于{this.state.topics.date}</p>
              </div>
            </div>
            <a style={{display: 'block', marginRight: '0.15rem',textAlign: 'right', marginBottom: '0.07rem'}} href='javascript;'>查看更多</a>
          </div>
          {/* 文章内容区域 */}
          <div style={{
            borderBottom: '1px dashed #ccc'
          }}>
              <p style={{
                padding: '0.47rem 0 0 0.15rem',
                width: '2.59rem',
                fontSize: '0.15rem',
                color:'rgba(51,51,51,1)',
                fontWeight: 600,
                lineHeight: '0.16rem'
              }}>{this.state.topics.artical}</p>
              <img style={{
                width: '1.43rem',
                height: '1.62rem',
                marginLeft: '2.15rem',
                marginBottom: '0.1rem'
              }} src={this.state.topics.img} alt=""/>
          </div>
          {/* 评论回复区域 */}
          {
            this.state.answerlist.map((item,index)=>{
              return <div key={index} style={{
                padding: '0 0.15rem',
                borderBottom: '1px solid #ccc'
              }}>
                <div style={{
                  display: 'flex',
                  justifyContent: 'space-between',
                  alignItems: 'center',
                  margin: "0.05rem 0 0.1rem 0"
                }}>
                  <p>
                    <img src={item.avatar} style={{
                      width: '0.25rem',
                      height: '0.25rem',
                      marginRight:'0.05rem'
                    }} alt=""/>
                    <i style={{
                      fontSize: '0.12rem',
                      fontWeight: 600,
                      color: '#666666',
                      marginRight:'0.05rem'
                    }}>{item.username}</i>
                    <span style={{
                      fontSize: '0.10rem',
                      fontWeight: 400,
                      color: '#ccc',
                      marginRight:'0.05rem'
                    }}>发布于{item.date}</span>
                  </p>
                  <p style={{
                      fontSize: '0.10rem',
                      fontWeight: 400,
                      color: '#ccc',
                      marginRight:'0.05rem'
                    }}>{index+1}楼</p>
                </div>
                <p style={{
                  marginBottom: '0.09rem',
                  fontWeight:600,
                  color:'rgba(102,102,102,1)',
                  lineHeight:'0.16rem',
                  fontSize: '0.12rem'
                }}>{item.detail}</p>
                <p style={{
                  marginBottom: '0.1rem',
                  fontWeight:600,
                  color:'#3CD578',
                  lineHeight:'0.16rem',
                  fontSize: '0.11rem',
                  textAlign: 'right'
                }}>回复</p>
              </div>
            })
          }
          {/* 点击查看更多 */}
          <p style={{
            height:' 0.5rem',
            textAlign: 'center',
            fontSize: '0.11rem',
            fontWeight: '450',
            lineHeight: '0.5rem',
            color: '#666666'
            // background: 'url("/images/查看.png") no-repeat right center',
            // backgroundSize: '0.11rem'
          }} onClick={
            ()=>{

            }
          }>查看更多问题 <img src='/images/查看.png' style={{width: '0.1rem', height: '0.1rem'}} alt=""/></p>
        </div>
      </div>
    );
  }
}

export default Com
